![New Socket Web Extension, Take Socket with You](https://cdn.sanity.io/images/cgdhsj6q/production/7c7e90f37af51d175eaf8b2ae56124aec35c57c8-874x566.png?w=400&fit=max&auto=format)
Product
New Socket Web Extension, Take Socket with You
Can you spot malicious malicious packages on the web at a glance? Socket can. Check out our updated Web Extension!
@pixi/core
Advanced tools
Package description
@pixi/core is a core module of the PixiJS library, which is a fast, lightweight 2D rendering engine for creating interactive graphics, games, and other visual content using WebGL and HTML5 canvas.
Creating a Renderer
This code demonstrates how to create a renderer using @pixi/core. The renderer is responsible for rendering the graphics to the screen. The example creates a renderer with a width of 800 pixels and a height of 600 pixels, and appends the renderer's view (canvas element) to the document body.
const { Renderer } = require('@pixi/core');
const renderer = new Renderer({ width: 800, height: 600 });
document.body.appendChild(renderer.view);
Creating a Texture
This code demonstrates how to create a texture using @pixi/core. Textures are used to apply images to graphics. The example creates a base texture from an image file and then creates a texture from the base texture.
const { Texture, BaseTexture } = require('@pixi/core');
const baseTexture = new BaseTexture('path/to/image.png');
const texture = new Texture(baseTexture);
Creating a Sprite
This code demonstrates how to create a sprite using @pixi/core. Sprites are basic objects for rendering images. The example creates a sprite from a texture, sets its position, and adds it to the renderer's stage.
const { Sprite } = require('@pixi/core');
const sprite = new Sprite(texture);
sprite.x = 100;
sprite.y = 150;
renderer.stage.addChild(sprite);
Rendering the Stage
This code demonstrates how to render the stage using @pixi/core. The stage is the root container for all display objects. The example sets up an animation loop that continuously renders the stage.
function animate() {
requestAnimationFrame(animate);
renderer.render(renderer.stage);
}
animate();
Three.js is a popular 3D library that provides a wide range of features for creating 3D graphics and animations. While @pixi/core focuses on 2D rendering, Three.js is designed for 3D rendering and offers more advanced features for 3D graphics.
Phaser is a fast, free, and fun open-source framework for Canvas and WebGL-powered browser games. It provides a comprehensive suite of features for game development, including physics, input handling, and asset management. While @pixi/core is more focused on rendering, Phaser offers a complete game development framework.
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. It is designed for creating 3D games and experiences, offering a wide range of features for 3D rendering, physics, and more. Compared to @pixi/core, Babylon.js is more focused on 3D graphics and game development.
Readme
npm install @pixi/core
import * as core from '@pixi/core';
FAQs
Core PixiJS
The npm package @pixi/core receives a total of 84,796 weekly downloads. As such, @pixi/core popularity was classified as popular.
We found that @pixi/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Can you spot malicious malicious packages on the web at a glance? Socket can. Check out our updated Web Extension!
Product
Socket introduces three new customizable default security policies for users to choose from: Low Noise (traditional SCA), Default, and Higher Noise.
Security News
MITRE has just minted its 400th CNA, as the NVD struggles to tame its backlog of CVEs awaiting analysis, which has increased by 30% since June.